<div class="p+">
    <!-- Left direction -->
    <lx-fab lx-direction="left">
        <lx-fab-trigger>
            <lx-button lx-size="xl" lx-type="fab" lx-tooltip="Add" lx-tooltip-position="top">
                <i class="mdi mdi-android"></i>
                <i class="mdi mdi-plus"></i>
            </lx-button>
        </lx-fab-trigger>
 
        <lx-fab-actions>
            <lx-button lx-size="l" lx-color="black" lx-type="fab" lx-tooltip="Delete" lx-tooltip-position="top">
                <i class="mdi mdi-delete"></i>
            </lx-button>
 
            <lx-button lx-size="l" lx-color="black" lx-type="fab" lx-tooltip="Archive" lx-tooltip-position="top">
                <i class="mdi mdi-package"></i>
            </lx-button>
 
            <lx-button lx-size="l" lx-color="black" lx-type="fab" lx-tooltip="Edit" lx-tooltip-position="top">
                <i class="mdi mdi-pencil"></i>
            </lx-button>
        </lx-fab-actions>
    </lx-fab>
    
    <!-- Up direction -->
    <lx-fab lx-direction="up">
        <lx-fab-trigger>
            <lx-button lx-size="xl" lx-type="fab" lx-tooltip="Add" lx-tooltip-position="left">
                <i class="mdi mdi-android"></i>
                <i class="mdi mdi-plus"></i>
            </lx-button>
        </lx-fab-trigger>
 
        <lx-fab-actions>
            <lx-button lx-size="l" lx-color="black" lx-type="fab" lx-tooltip="Delete" lx-tooltip-position="left">
                <i class="mdi mdi-delete"></i>
            </lx-button>
 
            <lx-button lx-size="l" lx-color="black" lx-type="fab" lx-tooltip="Archive" lx-tooltip-position="left">
                <i class="mdi mdi-package"></i>
            </lx-button>
 
            <lx-button lx-size="l" lx-color="black" lx-type="fab" lx-tooltip="Edit" lx-tooltip-position="left">
                <i class="mdi mdi-pencil"></i>
            </lx-button>
        </lx-fab-actions>
    </lx-fab>
 
    <!-- Down direction -->
    <lx-fab lx-direction="down">
        <lx-fab-trigger>
            <lx-button lx-size="xl" lx-type="fab" lx-tooltip="Add" lx-tooltip-position="right">
                <i class="mdi mdi-android"></i>
                <i class="mdi mdi-plus"></i>
            </lx-button>
        </lx-fab-trigger>
 
        <lx-fab-actions>
            <lx-button lx-size="l" lx-color="black" lx-type="fab" lx-tooltip="Delete" lx-tooltip-position="right">
                <i class="mdi mdi-delete"></i>
            </lx-button>
 
            <lx-button lx-size="l" lx-color="black" lx-type="fab" lx-tooltip="Archive" lx-tooltip-position="right">
                <i class="mdi mdi-package"></i>
            </lx-button>
 
            <lx-button lx-size="l" lx-color="black" lx-type="fab" lx-tooltip="Edit" lx-tooltip-position="right">
                <i class="mdi mdi-pencil"></i>
            </lx-button>
        </lx-fab-actions>
    </lx-fab>
 
    <!-- Right direction -->
    <lx-fab lx-direction="right">
        <lx-fab-trigger>
            <lx-button lx-size="xl" lx-type="fab" lx-tooltip="Add" lx-tooltip-position="bottom">
                <i class="mdi mdi-android"></i>
                <i class="mdi mdi-plus"></i>
            </lx-button>
        </lx-fab-trigger>
 
        <lx-fab-actions>
            <lx-button lx-size="l" lx-color="black" lx-type="fab" lx-tooltip="Delete" lx-tooltip-position="bottom">
                <i class="mdi mdi-delete"></i>
            </lx-button>
 
            <lx-button lx-size="l" lx-color="black" lx-type="fab" lx-tooltip="Archive" lx-tooltip-position="bottom">
                <i class="mdi mdi-package"></i>
            </lx-button>
 
            <lx-button lx-size="l" lx-color="black" lx-type="fab" lx-tooltip="Edit" lx-tooltip-position="bottom">
                <i class="mdi mdi-pencil"></i>
            </lx-button>
        </lx-fab-actions>
    </lx-fab>
</div>